@model WalkingTec.Mvvm.Doc.ViewModels.SchoolVms.SchoolVm

<wt:fieldset field-set-style="Simple" title="MultiUpload">
 </wt:fieldset>
   <p>The multiupload control is used for file upload. Common attributes are:</p>
        <table lay-filter="parse-table-demo">
            <thead>
                <tr>
                    <th lay-data="{field:'username', width:200}">Propties</th>
                    <th lay-data="{field:'joinTime', width:600}">Description</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Id</td>
                    <td>Control ID, generated by default according to the bound field name</td>
                </tr>
                <tr>
                    <td>Field</td>
                    <td>Must bind to a List&lt;ISubFile&gt;field，required</td>
                </tr>
                <tr>
                    <td>Disabled</td>
                    <td>Disabled,or not</td>
                </tr>
                <tr>
                    <td>Name</td>
                    <td>Control name, generated by default according to the bound field name</td>
                </tr>
                <tr>
                    <td>LabelText</td>
                    <td>Label content</td>
                </tr>
                <tr>
                    <td>LabelWidth</td>
                    <td>Label length, default= 80</td>
                </tr>
                <tr>
                    <td>HideLabel</td>
                    <td>Hide label,or not</td>
                </tr>
                <tr>
                    <td>FileSize</td>
                    <td>File size limit ,by kb</td>
                </tr>
                <tr>
                    <td>UploadType</td>
                    <td>File type restriction: allfiles, imagefile, zipfile, excelfile, wordfile, pdffile, textfile</td>
                </tr>
                <tr>
                    <td>ThumbWidth</td>
                    <td>If the file type is ImageFile, set the thumbnail width allows the framework to automatically reduce the size of the picture to the specified width before saving</td>
                </tr>
                <tr>
                    <td>ThumbHeight</td>
                    <td>If the file type is imagefile, specifying the thumbnail width allows the framework to automatically reduce the picture to the specified height before saving</td>
                </tr>
                <tr>
                    <td>ShowPreview</td>
                    <td> use thumbnail preview, or not;if the upload file category is ImageFile, default=true</td>
                </tr>
                <tr>
                    <td>PreviewWidth</td>
                    <td>If thumbnail preview is used, set thumbnail width, default : 64</td>
                </tr>
                <tr>
                    <td>PreviewHeight</td>
                    <td>If thumbnail preview is used, set thumbnail height, default:64</td>
                </tr>
                <tr>
                    <td>CustomType</td>
                    <td>If the common uploadtype is not supported, you can customize file type restrictions, such as rar</td>
                </tr>
            </tbody>
        </table>
    <wt:quote>
        <p>The MultiUpload control must be bound with a lList&lt;ISubFile&gt; field. ISubFileis an interface provided by the framework to define child attachments. When the Modelis defined according to this data structure, the framework will automatically save and delete multiple attachments</p>
        <p>The SaveFileModecan be set in the appsetting file to setting the saving method of framework attachments. Currently, it supports DataBase, Local and DFS</p>
        <p>The following example shows the case: no effect after selecting the file, because this document project does not connect to the real database</p>
        <p>Notice how to write an attachment in the Model</p>
    </wt:quote>
        <wt:tab>
          <wt:tabheaders>
            <wt:tabheader title="Effect" />
            <wt:tabheader title="Code" />
            <wt:tabheader title="Model" />
          </wt:tabheaders>
            <wt:tabcontents>
                <wt:tabcontent>
                    <wt:form vm="@Model" style="max-width:600px;">
                        <wt:multiupload field="Entity.Photos" upload-type="ImageFile" />
                        <wt:row align="AlignEnum.Right">
                            <wt:submitbutton disabled="true" />
                            <wt:closebutton disabled="true" />
                        </wt:row>
                    </wt:form>
                </wt:tabcontent>
                <wt:tabcontent>
                    <wt:code>
&ltwt:form vm="@@Model" width="600"&gt
    &ltwt:multiupload field="Entity.Photos" upload-type="ImageFile"  /&gt
    &ltwt:row align="AlignEnum.Right"&gt
        &ltwt:submitbutton disabled="true" /&gt
        &ltwt:closebutton disabled="true" /&gt
    &lt/wt:row&gt
&lt/wt:form&gt

                    </wt:code>
                </wt:tabcontent>
                <wt:tabcontent>
                    <wt:code>
    public class School : BasePoco
    {
        [Display(Name = "School code")]
        [Required()]
        public string SchoolCode { get; set; }

        [Display(Name = "School name")]
        [StringLength(50)]
        [Required()]
        public string SchoolName { get; set; }

        //Custom file attachments
        public List&lt;SchoolPhoto&gt; Photos { get; set; }
    }

    //SchoolPhoto should be a Poco implements ISubFile
    public class SchoolPhoto : TopBasePoco, ISubFile
    {
        public int SchoolId { get; set; }
        public School School { get; set; }

        //Fields defined in ISubFile
        public Guid FileId { get; set; }
        public FileAttachment File { get; set; }
        public int order { get; set; }
    }

                    </wt:code>
                </wt:tabcontent>
            </wt:tabcontents>
        </wt:tab>

    <script>
    layui.use('code',function(){layui.code({ about: false })})
        layui.table.init('parse-table-demo', {
        limit: 100, page: false
        });
    </script>
<script>
  $("#@Model.ViewDivId").parent().css("height", "auto");
</script>
